<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<title>YouTube5.0</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<style type="text/css">

</style>
<script type="text/javascript">

function dragStart(ev) {
    ev.dataTransfer.effectAllowed='move';
    ev.dataTransfer.setData("videoID", ev.target.getAttribute('id'));
    ev.dataTransfer.setDragImage(ev.target,0,0);
    return true;
}

function dragEnter(ev) {
    return true;
}

function dragOver(ev) {
    var videoID = ev.dataTransfer.getData("videoID");
    var targetID = ev.target.getAttribute('id');
    if(( targetID =='player' || targetID == 'playList') && (videoID != ""))
        return false;
    else
        return true;
}

function dragEnd(ev) {
    ev.dataTransfer.clearData("videoID");
    return true
}

function dragDrop(ev) {
    var videoID = ev.dataTransfer.getData("videoID");
    var targetID = ev.target.getAttribute('id');
    var video = document.getElementById(videoID);
    if (targetID == 'player' && videoID != "") {
        var videoURL = "http://www.youtube.com/embed/" + videoID + "?autoplay=1";
        ev.target.childNodes[1].childNodes[1].setAttribute("src", videoURL);
        ev.target.childNodes[1].setAttribute("class", "video");
        ev.target.childNodes[1].setAttribute("id", videoID)
    } 

    if (targetID == 'playList' && videoID != "") {
    	var videoURL = "http://www.youtube.com/embed/" + videoID;
    	var newFav = document.getElementById("favTemplate").cloneNode(true);
    	newFav.setAttribute("id", videoID);
    	newFav.setAttribute("class", "fav");
    	newFav.childNodes[1].setAttribute("src", videoURL);
    	ev.target.appendChild(newFav);  	
    }
    
    ev.stopPropagation();
    return false; // return false so the event will not be propagated to the browser
}

function setVideoInPlayer(value) {
	var player = document.getElementById("player");
	var videoID = value.getAttribute('id');
	var videoURL = "http://www.youtube.com/embed/" + videoID + "?autoplay=1";
	player.childNodes[1].setAttribute("id", videoID);
	player.childNodes[1].setAttribute("class", "video");
	player.childNodes[1].childNodes[1].setAttribute("src", videoURL);
}

function setLoop() {
	var player = document.getElementById("player");
	var videoID = player.childNodes[1].getAttribute("id");
	var videoURL = "http://www.youtube.com/embed/" + videoID + "?autoplay=1&loop=1&playlist=" + videoID;
	player.childNodes[1].childNodes[1].setAttribute("src", videoURL);
}

function playFavs() {
	var player = document.getElementById("player");
	var playList = document.getElementById("playList");
	var videoID = playList.childNodes[3].getAttribute("id");
	var videoURL = "http://www.youtube.com/embed/" + videoID + "?autoplay=1&loop=1&playlist=" + videoID;
    var i = 5;
    while (i < playList.childNodes.length) {
		 videoURL = videoURL + "," + playList.childNodes[i].getAttribute("id");
		 i = i + 2;
	}
	player.childNodes[1].childNodes[1].setAttribute("src", videoURL);
}

</script>
</head>
<body>
<header>
 
 	<img src="css/youtubeLogo.jpg" class="zentriert">
 	<br />
 	<input type="search" name="suchbegriff">
 	<br />
</header>
<section>
	<div id="player" ondragenter="return dragEnter(event)"
		ondrop="return dragDrop(event)" ondragover="return dragOver(event)">

		<div id="dOgUx5SXHuo" class="video" draggable="true" ondragstart="return dragStart(event)"
			ondragend="return dragEnd(event)">
			<iframe class="youtube-player" type="text/html" width="800"
				height="500" src="http://www.youtube.com/embed/dOgUx5SXHuo"
				frameborder="0" allowFullScreen> </iframe>
		</div>
		<button onclick="javascript:setLoop();">Loop</button>
		<button onclick="javascript:playFavs();">Play Favorites</button>
	</div>

	<div id="playList" ondragenter="return dragEnter(event)"
		ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
		
		<div id="favTemplate" class="favTemplate" draggable="true" ondragstart="return dragStart(event)"
			ondragend="return dragEnd(event)" onclick="javascript:setVideoInPlayer(this);">
			<iframe class="youtube-player" type="text/html" width="225"
				height="150" src="http://www.youtube.com/embed/VIDEO_ID"
				frameborder="0"> </iframe>
		</div>
		<div id="47D9-U8hn5I" class="fav" draggable="true" ondragstart="return dragStart(event)"
			ondragend="return dragEnd(event)" onclick="javascript:setVideoInPlayer(this);">
			<iframe class="youtube-player" type="text/html" width="225"
				height="150" src="http://www.youtube.com/embed/47D9-U8hn5I"
				frameborder="0"> </iframe>
		</div>
		<div id="95Fx2aYQbQs" class="fav" draggable="true" ondragstart="return dragStart(event)"
			ondragend="return dragEnd(event)" onclick="javascript:setVideoInPlayer(this);">
			<iframe class="youtube-player" type="text/html" width="225"
				height="150" src="http://www.youtube.com/embed/95Fx2aYQbQs"
				frameborder="0"> </iframe>
		</div>
		<div id="hKKGtf37TEI" class="fav" draggable="true" ondragstart="return dragStart(event)"
			ondragend="return dragEnd(event)" onclick="javascript:setVideoInPlayer(this);">
			<iframe class="youtube-player" type="text/html" width="225"
				height="150" src="http://www.youtube.com/embed/hKKGtf37TEI"
				frameborder="0"> </iframe>
		</div>
	</div>
</section>

<footer>
  <p><a href="#">Youtube5</a></p>
</footer>
</body>
</html>